<template>
  <div class="win">
    <!-- 顶部切换 -->
    <div class="top_bar_space"></div>
    <div class="top_bar">
      <div
        class="item"
        @click="greenShow(index)"
        :class="current==index?'green':''"
        v-for="(item, index) in barList"
        :key="index"
      >
        <p>{{item}}</p>
      </div>
    </div>
    <div v-if="current==0" class="not_used_box coupon">
      <div class="item" v-for="(item, index) in couponData" :key="index">
        <div class="flag_box">
          <div class="triangle"></div>
          <div class="rectangle">
            <p class="expired_time">{{item.time}}</p>
          </div>
        </div>
        <div class="money_box">
          <p class="money">
            {{item.money}}
            <span>元</span>
          </p>
          <p class="full_money">满{{item.full_money}}可用</p>
        </div>
        <p class="name">{{item.name}}</p>
        <p class="time">{{item.end_time}}</p>
        <button class="not_used_btn" @click="hr_goodsClass(item.voucher_id)">立即使用</button>
      </div>
    </div>
    <div v-else-if="current==1" class="used_box coupon">
      <div class="item" v-for="(item, index) in couponData" :key="index">
        <div class="money_box">
          <p class="money">
            {{item.money}}
            <span>元</span>
          </p>
          <p class="full_money">满{{item.full_money}}可用</p>
        </div>
        <p class="name">{{item.name}}</p>
        <p class="time">{{item.end_time}}</p>
        <button class="not_used_btn">已使用</button>
      </div>
    </div>
    <div v-else class="expired_box coupon">
      <div class="item" v-for="(item, index) in couponData" :key="index">
        <div class="money_box">
          <p class="money">
            {{item.money}}
            <span>元</span>
          </p>
          <p class="full_money">满{{item.full_money}}可用</p>
        </div>
        <p class="name">{{item.name}}</p>
        <p class="time">{{item.end_time}}</p>
        <button class="not_used_btn">已过期</button>
      </div>
    </div>
    <noData v-if="couponData==''"></noData>
    <i-toast id="toast" />
  </div>
</template>

<script>
import noData from "@/components/noData";

export default {
  data() {
    return {
      bjurl: "",
      barList: ["未使用", "已使用", "已过期"],
      current: 0, //切换，0是未使用,1是已使用,2是已过期
      couponData: [], //优惠券数据
      total_price: 0, //订单总价
      order_type: 0 //判断
    };
  },
  methods: {
    // 请求接口优惠券列表
    getCouponData() {
      this.$ajax("/home/voucher/voucher_list", "post", {
        mark: this.current,
        total_price: this.total_price
      })
        .then(res => {
          
          if (res.status) {
            this.couponData = res.data;
          } else {
            this.couponData = "";
          }
        })
        .catch(err => {});
    },
    //切换未使用已使用已过期按钮
    greenShow(index) {
      if (this.current == index) return;
      else {
        this.current = index;
        this.couponData = "";
        this.getCouponData();
        this.$forceUpdate();
      }
    },
    //跳转到商品分类
    hr_goodsClass(voucher_id) {
      if (this.order_type == 1) {
        this.$bus.$emit("couponInfo", {
          voucher_id: voucher_id
        });
        wx.navigateBack({
          delta: 1
        });
      } else
        wx.navigateTo({
          url: "../goodsClass/main"
        });
    }
  },
  components: {
    noData
  },
  onLoad(e) {
    Object.assign(this.$data, this.$options.data());
    this.bjurl = this.$bjurl;
    this.barList = this.barList;
    this.current = this.current;
    this.total_price = e.total_price;
    this.order_type = e.order_type;
    this.getCouponData();
  }
};
</script>

<style lang="scss" scoped>
.win {
  .top_bar {
    z-index: 2;
    width: 750rpx;
    height: 88rpx;
    background-color: #ffffff;
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    .item {
      width: 33.3%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 28rpx;
      color: #4d4d4d;
      border-bottom: 4rpx solid #ffffff;
    }
    .green {
      color: $green;
      border-bottom: 4rpx solid $green;
    }
  }
  .top_bar_space {
    height: 88rpx;
  }
  .coupon {
    padding-bottom: 40rpx;
    .item {
      background-size: 100% 100%;
      margin: 20rpx auto 0;
      width: 698rpx;
      height: 270rpx;
      position: relative;
      .flag_box {
        position: absolute;
        right: 0;
        top: 10rpx;
        display: flex;
        .triangle {
          width: 0rpx;
          height: 0rpx;
          border-top: 20rpx solid #ffffff;
          border-left: 20rpx solid transparent;
          border-bottom: 20rpx solid #ffffff;
        }
        .rectangle {
          padding: 0 10rpx;
          box-sizing: border-box;
          height: 40rpx;
          background-color: #ffffff;
          color: $green;
          font-size: 22rpx;
          line-height: 40rpx;
        }
      }
      .money_box {
        position: absolute;
        left: 45rpx;
        top: 42rpx;
        color: #ffffff;
        .money {
          font-size: 80rpx;
          display: flex;
          align-items: flex-end;
          span {
            line-height: 1.8;
            font-size: 26rpx;
          }
        }
        .full_money {
          font-size: 28rpx;
        }
      }
      .name {
        position: absolute;
        top: 82rpx;
        left: 288rpx;
        font-size: 28rpx;
        color: #ffffff;
      }
      .time {
        position: absolute;
        bottom: 30rpx;
        left: 50rpx;
        font-size: 28rpx;
        color: #4d4d4d;
      }
      .not_used_btn {
        width: 150rpx;
        height: 46rpx;
        line-height: 46rpx;
        background: linear-gradient(
          0deg,
          rgba(11, 208, 94, 1),
          rgba(11, 208, 173, 1)
        );
        border-radius: 23rpx;
        position: absolute;
        right: 36rpx;
        bottom: 20rpx;
        color: #ffffff;
        font-size: 24rpx;
      }
    }
  }
  .not_used_box {
    .item {
      background-image: url($bjurl+"coupon_not_used.png");
    }
  }
  .used_box {
    .item {
      background-image: url($bjurl+"coupon_used.png");
      .not_used_btn {
        background: #cccccc;
      }
    }
  }
  .expired_box {
    .item {
      background-image: url($bjurl+"coupon_expired.png");
      .not_used_btn {
        background: #cccccc;
      }
    }
  }
}
</style>
